<template>
	<view class="container">
		<view class="card">
			<view class="item"><view>会议主题：{{ form.topic }}</view></view>
			<view class="item"><view>演&nbsp;讲&nbsp;人&nbsp;：{{ form.host_man }}</view></view>
			<view class="item"><view>负&nbsp;责&nbsp;人&nbsp;：{{ form.respons_man }}</view></view>
			<view class="item"><view>开始时间：{{ form.starttime }}</view></view>
			<view class="item"><view>结束时间：{{ form.overtime }}</view></view>
		</view>
		<view class="card">
			<view class="title flex-row">
				<view class="name">会议相关信息：</view>
			</view>
			<textarea v-model="form.meet_detail" placeholder="会议相关信息..." disabled/>
			<view class="title flex-row"><view class="name">文书照片</view></view>
			<view style="overflow: hidden;">
				<upload v-if="record_pics.length" :files="record_pics" :icon="false" :showBtn="false"></upload>
			</view>
			<view class="title flex-row"><view class="name">会议结束现场照片</view></view>
			<view style="overflow: hidden;">
				<upload v-if="over_pics.length" :files="over_pics" :icon="false" :showBtn="false"></upload>
			</view>
			<view v-for="(item, index) in resolves" :key="index">
				<view class="title flex-row"><view class="name">会议解决内容{{ index+1 }}</view></view>
				<view class="resolves flex-row" @click="resolveDetail(item.id)">
					<upload :files="item.pics" :icon="false" :showBtn="false"></upload>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
			<view @click="goBack" class="btn error">返回上级</view>
		</view>
	</view>
</template>

<script>
import upload from '@/components/upload/';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default{
	components: { upload,uniIcons },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			meet_id: '',
			meet_detail: '',
			record_pics: [],
			over_pics: [],
			handle_content: [],	// 解决办法的ID，多个用应英文逗号分隔
			resolves: [],
			form: {}
		}
	},
	onLoad(option){
		this.meet_id = option.id;
		this.getDetail();
		this.getResolves();
	},
	methods: {
		goBack(){
			uni.navigateBack()
		},
		// 获取详情
		getDetail(){
			let _this = this;
			uni.request({
				url: this.$API.eduSafeMeetingDetail,
				data: { 
					userid: this.userid, 
					meet_id: this.meet_id
				},
				header: this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					_this.form = data;
					_this.form.meet_detail = _this.form.meet_detail || ''
					
					// 处理图片
					if(data.record_pics) _this.record_pics = data.record_pics.split(',').map(item=>_this.$API.baseURL+item);
					if(data.over_pics) _this.over_pics = data.over_pics.split(',').map(item=>_this.$API.baseURL+item);
				}
			})
		},
		// 获取解决问题
		getResolves(){
			let _this = this;
			uni.request({
				url: this.$API.eduSafeMeetingResolveList,
				data: { 
					userid: this.userid, 
					meet_id: this.meet_id
				},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.resolves = res.data.data.map(item=>{
						// 记录ID
						_this.handle_content.push(item.id);
						
						// 处理图片
						let pics = item.pics.split(',');
						item.pics = pics.map(item=>_this.$API.baseURL+item);
						return item;
					});
				}
			})
		},
		// 内容详情
		resolveDetail(id){
			uni.navigateTo({
				url: 'resolveDetail?id='+id
			})
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	overflow-y: auto;
}

.red{
	color: red;
}

textarea{
	width: 100%;
	height: 160upx;
	padding: 10upx;
	font-size: 28upx;
	background: #F2F2F2;
	border-radius: 10upx;
	box-sizing: border-box;
	margin-bottom: 20upx;
}

/*列表*/
.card{
	background: #fff;
	overflow: hidden;
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card:first-child{
	margin: 20upx 0 0;
	border-radius: 0;
}
.card:first-child .item{
	text-indent: 10upx;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.btn{
	color: #fff;
	width: 280upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	margin: 40upx auto 0;
	background-color: #1692DC;
}
.btn:last-child{
	margin-bottom: 40upx;
}
.btn.error{
	background-color: red;
}
</style>
